<!--
 * @Author: lmk
 * @Date: 2021-11-24 15:03:13
 * @LastEditTime: 2021-11-30 22:22:50
 * @LastEditors: lmk
 * @Description: 
-->
<template>
	<!-- 玩家端的用户展示 -->
	<view class="u-flex">
    	<item-image type="1" :img="userForm.avatar"  :size="100"/>
		<view class="u-flex-1 u-margin-left-24">
			<view class="u-flex">
				<view class="box-title u-font-30 my-name">{{userForm.nickname}}</view>
				<!-- <view class="svip" :class="{'active':userForm.isSVIP}" v-if="userForm.hasOwnProperty('isSVIP')">SVIP</view> -->
			</view>
			<view class="u-flex u-margin-top-24" v-if="showLV">
				<view class="u-font-22 text-tips u-margin-right-20">
					ID:{{userForm.uid}}
				</view>
				<view class="text-color-765CFE u-font-22 " v-if="userForm.userGameLevel">
					LV <text class="u-margin-left-20">{{userForm.userGameLevel.userGameLevel}}</text>
				</view>
			</view>
			<slot name="content"></slot>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name:"userHeader",
		props:{
			form:{
				type:[Object,String],
				default:''
			},
			// 是否显示等级
			showLV:{
				type:Boolean,
				default:false
			}
		},
		created() {
			console.log(this.form)
		},
		computed: {
			loginForm() {
				return this.$store.getters.loginForm 
			},
			userForm(){
				return this.form || this.loginForm 
			}
		}
	}
</script>

<style lang="scss" scoped>
.nickname{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		flex: 1;
		flex-shrink: 0;
	}
	
	
	.my-name{
		max-width: 200rpx;
		margin-right: 20rpx;
	}
	.svip{
		width: 65rpx;
		color: white;
		font-size: 14rpx;
		text-align: center;
		line-height: 22rpx;
		background: #939393;
		letter-spacing: 2rpx;
		border-radius: 10px;
		&.active{
			background: #765CFE;
		}
	}
	.history-box{
		background-color: #5A46BE;
		border-radius: 26rpx;
		padding: 27rpx 0;
		.u-flex-1{
			position: relative;
			&:not(:last-child){
				&::after{
					content: '';
					position: absolute;
					width: 1rpx;
					height: 48rpx;
					background: rgba($color: #fff, $alpha: 0.2);
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}
	.lv-box{
		width: 160rpx;
		flex-direction: column;
	}
</style>
